<template>
	<view class="uni-tabBar">
		<view class="uni-tabBar-list" v-for="(item,index) in tabbarArr" @click="tabBtn(item)" :key="index">
			<view class="" >
				<i :class="['iconfont',item.icon,tabIndex==item.id?'active':''] "></i>
				<p :class="[tabIndex==item.id?'active':'']">{{item.name}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			tabIndex: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				tabbarArr: [{
						name: '首页',
						icon: 'icon-home',
						url: '/pages/uni_Home',
						id: 1,
					},
					{
						name: '功能',
						icon: 'icon-pengyouquan',
						url: '/pages/uni_shop',
						id: 2,
					},
					{
						name: '升级',
						icon: 'icon-fabu1',
						url: '/pages/uni_addInfo',
						id: 3,
					},
					{
						name: '排行榜',
						icon: 'icon-xinxi',
						url: '/pages/uni_message',
						id: 4,
					},
					{
						name: '钱包',
						icon: 'icon-wode1',
						url: '/pages/uni_Personalcenter',
						id: 5,
					},
				],
			}
		},
		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',
				'configObj'
			])
		},
		watch: {},
		onLoad() {},
		onReady() {
			// uni.hideTabBar()
		},
		methods: {
			
			tabBtn(e) {
				uni.switchTab({
					url: url,
					success() {
						uni.hideTabBar()
					}
				})
				
			},
		}
	}
</script>
<style scoped lang="less">
	.iconfont {
		font-size: 45upx;
		vertical-align: -0.15upx;
		fill: currentColor;
		overflow: hidden;
	}

	.uni-tabBar {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		z-index: 999;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.uni-tabBar-list {
			float: left;
			flex: 1;
			text-align: center;
			font-size: 20upx;
			position: relative;
			color: #666666;
			.iconfont{
				color: #666666;
			}
			.tabBarImg {
				width: 20rpx;
				height: 20rpx;
			}

			.numClass {
				position: absolute;
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				background: red;
				color: white;
				font-size: 20rpx;
				text-align: center;
				line-height: 35rpx;
				right: 35rpx;
				top: -10rpx;
				z-index: 1;
			}
		}

		.imageIcon {
			width: 100rpx;
			height: 100rpx;
			margin-top: -60rpx;
		}

		.active {
			color: rgb(234, 51, 35)!important;
		}
	}
</style>